<template>
  <div class="home-container">
    <!-- 顶部横幅 -->
    <div class="home-banner carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://images.unsplash.com/photo-1450778869180-41d0601e046e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="宠物商店促销">
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1587559070722-caf944a2fc71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="可爱宠物">
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="宠物用品">
        </div>
      </div>
      <div class="carousel-indicators">
        <span class="indicator active" data-index="0"></span>
        <span class="indicator" data-index="1"></span>
        <span class="indicator" data-index="2"></span>
      </div>
      <button class="carousel-control carousel-control-prev">
        <i class="fas fa-chevron-left"></i>
      </button>
      <button class="carousel-control carousel-control-next">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>

    <!-- 分类导航 -->
    <div class="category-header">
      <h2>热门分类</h2>
    </div>
    <div class="category-nav">
      <div class="category-item">
        <div class="icon-circle">
          <i class="fas fa-dog"></i>
        </div>
        <span>狗狗</span>
      </div>
      <div class="category-item">
        <div class="icon-circle">
          <i class="fas fa-cat"></i>
        </div>
        <span>猫咪</span>
      </div>
      <div class="category-item">
        <div class="icon-circle">
          <i class="fas fa-fish"></i>
        </div>
        <span>水族</span>
      </div>
      <div class="category-item">
        <div class="icon-circle">
          <i class="fas fa-drumstick-bite"></i>
        </div>
        <span>宠物食品</span>
      </div>
      <div class="category-item">
        <div class="icon-circle">
          <i class="fas fa-shopping-bag"></i>
        </div>
        <span>宠物用品</span>
      </div>
      <div class="category-item">
        <div class="icon-circle">
          <i class="fas fa-medkit"></i>
        </div>
        <span>医疗保健</span>
      </div>
    </div>

    <!-- 推荐商店 -->
    <section class="section">
      <div class="section-header">
        <h2>附近宠物店</h2>
        <a href="#" class="view-all">查看地图 ></a>
      </div>
      
      <div class="store-list">
        <router-link :to="{ name: 'StoreDetail', params: { id: 1 }}" class="store-card">
          <img class="store-image" src="https://images.unsplash.com/photo-1588943211346-0908a1fb0b01?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="宠物乐园">
          <div class="store-info">
            <div class="store-name">宠物乐园</div>
            <div class="store-address">朝阳区建国路88号</div>
            <div class="store-distance">距离 0.5km</div>
          </div>
        </router-link>

        <router-link :to="{ name: 'StoreDetail', params: { id: 2 }}" class="store-card">
          <img class="store-image" src="https://images.unsplash.com/photo-1551909353-bd0b5384719a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="萌宠之家">
          <div class="store-info">
            <div class="store-name">萌宠之家</div>
            <div class="store-address">海淀区中关村大街1号</div>
            <div class="store-distance">距离 1.2km</div>
          </div>
        </router-link>

        <router-link :to="{ name: 'StoreDetail', params: { id: 3 }}" class="store-card">
          <img class="store-image" src="https://images.unsplash.com/photo-1516453734593-8d198ae84bcf?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="爱宠天地">
          <div class="store-info">
            <div class="store-name">爱宠天地</div>
            <div class="store-address">西城区西单北大街</div>
            <div class="store-distance">距离 2.0km</div>
          </div>
        </router-link>
      </div>
    </section>

    <!-- 热门产品 -->
    <section class="section">
      <div class="section-header">
        <h2>热门产品</h2>
        <a href="#" class="view-all">查看更多 ></a>
      </div>
      
      <div class="product-list">
        <div class="product-card">
          <div class="product-img">
            <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="金毛幼犬">
          </div>
          <div class="product-info">
            <h3>金毛幼犬</h3>
            <p class="price">¥2800</p>
            <button class="add-to-cart-btn">加入购物车</button>
          </div>
        </div>

        <div class="product-card">
          <div class="product-img">
            <img src="https://images.unsplash.com/photo-1536590158209-e9d615d525e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="英短蓝猫">
          </div>
          <div class="product-info">
            <h3>英短蓝猫</h3>
            <p class="price">¥3500</p>
            <button class="add-to-cart-btn">加入购物车</button>
          </div>
        </div>

        <div class="product-card">
          <div class="product-img">
            <img src="https://images.unsplash.com/photo-1589924691995-400dc9ecc119?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="宠物高级狗粮">
          </div>
          <div class="product-info">
            <h3>宠物高级狗粮</h3>
            <p class="price">¥129</p>
            <button class="add-to-cart-btn">加入购物车</button>
          </div>
        </div>

        <div class="product-card">
          <div class="product-img">
            <img src="https://images.unsplash.com/photo-1545276880-75e4c3c6634e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="猫爬架">
          </div>
          <div class="product-info">
            <h3>猫爬架</h3>
            <p class="price">¥258</p>
            <button class="add-to-cart-btn">加入购物车</button>
          </div>
        </div>
      </div>
    </section>

    <!-- 精选视频 -->
    <section class="section">
      <div class="section-header">
        <h2>精选视频</h2>
        <a href="#" class="view-all">查看更多 ></a>
      </div>
      
      <div class="video-list">
        <div class="video-card">
          <div class="video-thumbnail">
            <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="如何训练宠物">
            <div class="video-play-icon">
              <i class="fas fa-play"></i>
            </div>
          </div>
          <div class="video-info">
            <div class="video-title">如何训练你的狗狗听指令</div>
            <div class="video-views">1.2万次观看</div>
          </div>
        </div>
        
        <div class="video-card">
          <div class="video-thumbnail">
            <img src="https://images.unsplash.com/photo-1577175889968-f551f5978161?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="猫咪护理">
            <div class="video-play-icon">
              <i class="fas fa-play"></i>
            </div>
          </div>
          <div class="video-info">
            <div class="video-title">猫咪护理必备知识</div>
            <div class="video-views">0.9万次观看</div>
          </div>
        </div>
        
        <div class="video-card">
          <div class="video-thumbnail">
            <img src="https://images.unsplash.com/photo-1560807707-8cc77767d783?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="宠物健康">
            <div class="video-play-icon">
              <i class="fas fa-play"></i>
            </div>
          </div>
          <div class="video-info">
            <div class="video-title">宠物健康饮食指南</div>
            <div class="video-views">0.8万次观看</div>
          </div>
        </div>
      </div>
    </section>

    <TabBar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue';

export default {
  name: 'HomeView',
  components: {
    TabBar
  },
  data() {
    return {
      // 如果需要，可以在这里添加数据
    }
  },
  methods: {
    // 可以添加方法
  },
  mounted() {
    // 轮播图功能
    const carousel = document.querySelector('.carousel');
    const items = carousel.querySelectorAll('.carousel-item');
    const indicators = carousel.querySelectorAll('.indicator');
    const prevBtn = carousel.querySelector('.carousel-control-prev');
    const nextBtn = carousel.querySelector('.carousel-control-next');
    let currentIndex = 0;
    let interval;

    // 切换到指定幻灯片
    const showSlide = (index) => {
      // 取消当前激活状态
      items.forEach(item => item.classList.remove('active'));
      indicators.forEach(indicator => indicator.classList.remove('active'));
      
      // 激活新的幻灯片
      currentIndex = (index + items.length) % items.length;
      items[currentIndex].classList.add('active');
      indicators[currentIndex].classList.add('active');
    };

    // 下一张幻灯片
    const nextSlide = () => {
      showSlide(currentIndex + 1);
    };

    // 上一张幻灯片
    const prevSlide = () => {
      showSlide(currentIndex - 1);
    };

    // 设置自动轮播
    const startAutoSlide = () => {
      interval = setInterval(nextSlide, 3000);
    };

    // 停止自动轮播
    const stopAutoSlide = () => {
      clearInterval(interval);
    };

    // 绑定指示器点击事件
    indicators.forEach((indicator, index) => {
      indicator.addEventListener('click', () => {
        showSlide(index);
        stopAutoSlide();
        startAutoSlide();
      });
    });

    // 绑定前进后退按钮
    prevBtn.addEventListener('click', () => {
      prevSlide();
      stopAutoSlide();
      startAutoSlide();
    });

    nextBtn.addEventListener('click', () => {
      nextSlide();
      stopAutoSlide();
      startAutoSlide();
    });

    // 鼠标悬停时暂停轮播
    carousel.addEventListener('mouseenter', stopAutoSlide);
    carousel.addEventListener('mouseleave', startAutoSlide);

    // 开始自动轮播
    startAutoSlide();
  }
}
</script>

<style scoped>
.home-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  padding-bottom: 70px; /* 为底部导航栏留出空间 */
}

.home-banner {
  height: 400px;
  background: linear-gradient(135deg, #3490dc, #6574cd);
  border-radius: 12px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 轮播图样式 */
.carousel {
  position: relative;
}

.carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

.carousel-item.active {
  opacity: 1;
  z-index: 2;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 3;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background-color: white;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 3;
}

.carousel-control-prev {
  left: 20px;
}

.carousel-control-next {
  right: 20px;
}

.banner-content {
  padding: 40px;
  color: white;
  max-width: 600px;
}

.banner-content h1 {
  font-size: 42px;
  margin-bottom: 16px;
}

.banner-content p {
  font-size: 18px;
  margin-bottom: 24px;
  opacity: 0.9;
}

.primary-btn {
  background-color: white;
  color: #3490dc;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.category-header {
  margin-bottom: 20px;
}

.category-header h2 {
  font-size: 24px;
  color: #2d3748;
}

.category-nav {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  gap: 5px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;
  width: 12%;
  background-color: transparent;
  cursor: pointer;
  margin: 0 2px;
}

.category-item:first-child {
  margin-left: 0;
}

.category-item:last-child {
  margin-right: 0;
}

.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #3490dc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.category-item i {
  font-size: 30px;
  color: white;
}

.section {
  margin: 40px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  color: #2d3748;
}

.view-all {
  color: #3490dc;
  text-decoration: none;
  font-weight: 500;
}

.store-list {
  display: flex;
  overflow-x: auto;
  padding: 10px 5px;
  gap: 15px;
  scroll-behavior: smooth;
}

.product-list {
  display: flex;
  overflow-x: auto;
  padding: 10px 5px;
  gap: 15px;
  scroll-behavior: smooth;
}

.store-grid, .product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.store-card {
  min-width: 200px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
}

.store-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.store-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.store-info {
  padding: 12px;
}

.store-name {
  font-size: 16px;
  font-weight: 500;
  color: #2d3748;
  margin-bottom: 5px;
}

.store-address {
  font-size: 12px;
  color: #718096;
  margin-bottom: 5px;
}

.store-distance {
  font-size: 12px;
  color: #a0aec0;
}

.price {
  color: #e53e3e;
  font-weight: bold;
  margin-bottom: 12px;
}

.add-to-cart-btn {
  width: 100%;
  padding: 8px 0;
  background-color: #3490dc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart-btn:hover {
  background-color: #2779bd;
}

.product-card {
  min-width: 180px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.product-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.product-info {
  padding: 15px;
}

.product-info h3 {
  margin: 0 0 8px;
  color: #2d3748;
}

.video-list {
  display: flex;
  overflow-x: auto;
  padding: 10px 5px;
  gap: 15px;
  scroll-behavior: smooth;
}

.video-card {
  min-width: 240px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 140px;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 14px;
  font-weight: 500;
  color: #2d3748;
  margin-bottom: 5px;
}

.video-views {
  font-size: 12px;
  color: #718096;
}

@media (max-width: 768px) {
  .store-grid, .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .category-nav {
    overflow-x: auto;
    justify-content: flex-start;
  }
  
  .category-item {
    min-width: 100px;
    margin-right: 10px;
  }
}

@media (max-width: 480px) {
  .store-grid, .product-grid {
    grid-template-columns: 1fr;
  }
  
  .home-banner {
    height: 300px;
  }
  
  .banner-content h1 {
    font-size: 32px;
  }
}
</style>
